<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Box color </title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">	

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>
<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Box Color
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item"><a href="#">Examples</a></li>
        <li class="breadcrumb-item active">Box Color </li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">
		
		<div class="row">
		
		  <!--Solid box header!-->
		  <div class="col-12">
			  <h3 class="page-header">Solid box header
			  	<p class="subtitle font-size-14 mb-0">Each box can accpet <code>.box-solid .bg-*</code> class that <b>*</b> is a color name.</p>
			  </h3>
		  </div>
		
		  <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-primary">
              <div class="box-header">
                <h4 class="box-title"><strong>Primary</strong></h4>
              </div>

              <div class="box-body">
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-black">
              <div class="box-header">
                <h4 class="box-title"><strong>Secondary</strong></h4>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-success">
              <div class="box-header">
                <h4 class="box-title"><strong>Success</strong></h4>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-info">
              <div class="box-header">
                <h4 class="box-title"><strong>Info</strong></h4>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-warning">
              <div class="box-header">
                <h4 class="box-title"><strong>Warning</strong></h4>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
			
		  <div class="col-md-6 col-lg-4">
            <div class="box box-solid bg-danger">
              <div class="box-header">
                <h4 class="box-title"><strong>Danger</strong></h4>
              </div>


              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
		
		</div>
		
		<div class="row">
		
		  <!--Background color!-->
		  <div class="col-12">
			  <h3 class="page-header">Background Color
			  	<p class="subtitle font-size-14 mb-0">Each box can accpet <code>.box-*</code> class that <b>*</b> is a <a href="../ui/general.html" target="_blank">color name</a>. To make the color texts white, you should also add <code>.box-inverse</code> to the <em>.box</em> tag.</p>
			  </h3>
		  </div>
		
		  <div class="col-md-6 col-lg-4">
            <div class="box box-inverse box-primary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Primary</strong></h4>
				<div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-secondary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Secondary</strong> <small class="sidetitle">Without .box-inverse</small></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-inverse box-success">
              <div class="box-header">
                <h4 class="box-title"><strong>Success</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-inverse box-info">
              <div class="box-header">
                <h4 class="box-title"><strong>Info</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-inverse box-warning">
              <div class="box-header">
                <h4 class="box-title"><strong>Warning</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
			
		  <div class="col-md-6 col-lg-4">
            <div class="box box-inverse box-danger">
              <div class="box-header">
                <h4 class="box-title"><strong>Danger</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
		
		</div>			
		
		<div class="row">
		
		  <!--Pale background color!-->
		  <div class="col-12">
			  <h3 class="page-header">Pale Background Color
			  	<p class="subtitle font-size-14 mb-0">Each box can accpet <code>.bg-*</code> <a href="../ui/general.html" target="_blank">utility class</a></p>
			  </h3>
		  </div>
		
		  <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-primary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Primary</strong></h4>
				<div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-secondary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Secondary</strong> <small class="sidetitle">Without .box-inverse</small></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-success">
              <div class="box-header">
                <h4 class="box-title"><strong>Success</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-info">
              <div class="box-header">
                <h4 class="box-title"><strong>Info</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-warning">
              <div class="box-header">
                <h4 class="box-title"><strong>Warning</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
			
		  <div class="col-md-6 col-lg-4">
            <div class="box bg-pale-danger">
              <div class="box-header">
                <h4 class="box-title"><strong>Danger</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
		
		</div>
		
		<div class="row">
		
		  <!--Outline boxs!-->
		  <div class="col-12">
			  <h3 class="page-header">Outline boxs
			  	<p class="subtitle font-size-14 mb-0">Each box can accpet <code>.box-outline-*</code> class that <b>*</b> is a color name.</p>
			  </h3>
		  </div>
		
		  <div class="col-md-6 col-lg-4">
            <div class="box box-outline-primary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Primary</strong></h4>
				<div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-outline-secondary">
              <div class="box-header with-border">
                <h4 class="box-title"><strong>Secondary</strong> <small class="sidetitle">Without .box-inverse</small></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-outline-success">
              <div class="box-header">
                <h4 class="box-title"><strong>Success</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-outline-info">
              <div class="box-header">
                <h4 class="box-title"><strong>Info</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-outline-warning">
              <div class="box-header">
                <h4 class="box-title"><strong>Warning</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
			
		  <div class="col-md-6 col-lg-4">
            <div class="box box-outline-danger">
              <div class="box-header">
                <h4 class="box-title"><strong>Danger</strong></h4>
                <div class="box-tools pull-right">					
					<ul class="box-controls">
					  <li><a class="box-btn-close" href="#"></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.
              </div>
            </div>
          </div>
		
		</div>		
		
		<div class="row">
		
		  <!--Bordery boxs!-->
		  <div class="col-12">
			  <h3 class="page-header">Bordery boxs
			  	<p class="subtitle font-size-14 mb-0">You are able to add borders to any side of a box. In some cases, you might want to have a 3px border in one side of a box.</p>
			  </h3>
		  </div>
		
			
		  <div class="col-md-6">
            <div class="box bl-3 border-primary">
			  <div class="box-header">
                <h4 class="box-title">Bordery <strong>left</strong></h4>
              </div>
				
              <div class="box-body">
                <p><code>.bl-3.border-primary</code></p>
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>
			
		  <div class="col-md-6">
            <div class="box bt-3 border-info">
			  <div class="box-header">
                <h4 class="box-title">Bordery <strong>Top</strong></h4>
              </div>
				
              <div class="box-body">
                <p><code>.bt-3.border-info</code></p>
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>
			
		  <div class="col-md-6">
            <div class="box bb-3 border-warning">
			  <div class="box-header">
                <h4 class="box-title">Bordery <strong>Bottom</strong></h4>
              </div>
				
              <div class="box-body">
                <p><code>.bb-3.border-warning</code></p>
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>
		  
		  <div class="col-md-6">
            <div class="box br-3 border-danger">
			  <div class="box-header">
                <h4 class="box-title">Bordery <strong>Right</strong></h4>
              </div>
				
              <div class="box-body">
                <p><code>.br-3.border-danger</code></p>
                <p>On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain.</p>
              </div>
            </div>
          </div>
          
		
		</div>	

    </section>
    <!-- /.content -->
  </div>
 

</div>


	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	

</body>
</html>
